<template>
  <div class="register">
    <b-row class="mt-5">
      <b-col
        md="8"
        offset-md="2"
        lg="6"
        offset-lg="3"
      >
        <b-card title="注册">
          <b-form>
            <b-form-group label="名称:">
              <b-form-input
                v-model="$v.user.name.$model"
                type="text"
                placeholder="输入你的名称（选填）"
              ></b-form-input>
            </b-form-group>
            <b-form-group label="手机号:">
              <b-form-input
                v-model="$v.user.telephone.$model"
                type="number"
                required
                placeholder="输入你的手机号"
                :state="valiDateState('telephone')"
              ></b-form-input>
              <b-form-invalid-feedback :state="valiDateState('telephone')">
                手机号不符合要求
              </b-form-invalid-feedback>
              <!-- <b-form-text
                id="telephone"
                text-variant="danger"
                v-if="showTelephoneValidate"
              >
                手机号必须11位
              </b-form-text> -->
            </b-form-group>
            <b-form-group label="密码:">
              <b-form-input
                v-model="$v.user.password.$model"
                type="password"
                required
                placeholder="输入你的密码"
                :state="valiDateState('password')"
              ></b-form-input>
              <b-form-invalid-feedback :state="valiDateState('password')">
                密码必须是6位
              </b-form-invalid-feedback>
            </b-form-group>
            <b-button
              @click="register"
              variant="primary"
              block=""
            >注册</b-button>
          </b-form>
        </b-card>
      </b-col>
    </b-row>
  </div>
</template>

<script>
import { required, minLength } from 'vuelidate/lib/validators';

import customValidator from '@/helper/validator';
import storageService from '@/service/storageService';
import userService from '@/service/userService';


export default {
  data() {
    return {
      user: {
        name: '',
        telephone: '',
        password: '',
      },
      showTelephoneValidate: false,
    };
  },
  validations: {
    user: {
      name: {

      },
      telephone: {
        required,
        telephone: customValidator,
        // minLength: minLength(11),
        // maxLength: maxLength(11),
      },
      password: {
        required,
        minLength: minLength(6),
      },
    },
  },
  methods: {
    valiDateState(name) {
      // es6 解析赋值
      const { $dirty, $error } = this.$v.user[name];
      return $dirty ? !$error : null;
    },
    register() {
      // if (this.user.telephone.length !== 11) {
      //   this.showTelephoneValidate = true;
      // }
      // 验证数据
      this.$v.user.$touch();
      if (this.$v.user.$anyError) {
          return;
      }
      // 请求
      userService.register(this.user).then((res) => {
        // 保存token
        console.log(res.data.data.token);
        storageService.set(storageService.USER_TOKEN, res.data.data.token);
        // 跳转主页
        this.$router.replace({ name: 'Home' });
      }).catch((err) => {
        this.$bvToast.toast(err.response.data.msg, {
          title: '数据验证错误',
          variant: 'danger',
          solid: true,
        });
      });
         console.log('register');
   },
  },
};
</script>

<style lang="scss">
.a {
  font: 1em sans-serif;
}
</style>
